<template>
	
	
	<view  class="post-detail-container" style="overflow-y: scroll;">
		<image class="arrow" src="../../static/home/main/details/arrow.png" @click="goBack()"></image>
		<view class="headnavi">
			<view class="navi-title">详情</view>
		</view>
		
		<div class="write" @click="write()"> 
			
			写回复...
			<div class="write-icon">
			</div>
		</div>
		 <div class="reply">
		    <!-- 灰色遮罩 -->
		    <div class="overlay" v-if="showModal" @click="closeModal"></div>
		    <!-- 弹窗内容 -->
		    <div class="modal" v-if="showModal">
		      <h2 style="text-align: center;">回复</h2>
		      <textarea v-model="replyText" style="background-color: #E5E5E5;width: 100%;margin: 2vh 0;padding: 10px;box-sizing: border-box;"></textarea>
		      <button @click="comment">提交</button>
		    </div>
		</div>
		<div class="main"  >
			<div class="poster" >
				<div class="poster-img"><image :src="posterDate.avatar" alt="" /></div>
				
				<div class="post-message">
					<div class="poster-name">{{posterDate.userName}}</div>
					<div class="time">{{postData.createTime}}</div>
				</div>
				
			
				<div class="follow" v-if="!self">
					<div class="follow-img" > 
						<image src="../../static/chishenme/guanzhu.png" v-if="!followed" mode="" @click="follow"></image>
						<image src="../../static/chishenme/yiguanzhu.png" v-if="followed" mode="" @click="unfollow" ></image>		
					</div>
				</div>
				
			</div>
			<div class="text" >
				{{postData.content}}
				
			</div>
			<div class="imgs" >
				 <image  :src="postData.pictureUrl1" v-if="postData.pictureUrl1" alt=""  @click="handleImageClick(postData.pictureUrl1,1)"/>
				 <image  :src="postData.pictureUrl2" v-if="postData.pictureUrl2" alt="" @click="handleImageClick(postData.pictureUrl2,2)"/>
				 <image :src="postData.pictureUrl3" v-if="postData.pictureUrl3" alt="" @click="handleImageClick(postData.pictureUrl3,3)"/>
				 <image  :src="postData.pictureUrl4" v-if="postData.pictureUrl4" alt="" @click="handleImageClick(postData.pictureUrl4,4)"/>
				 <image  :src="postData.pictureUrl5" v-if="postData.pictureUrl5" alt="" @click="handleImageClick(postData.pictureUrl5,5)"/>
				 <image  :src="postData.pictureUrl6" v-if="postData.pictureUrl6" alt="" @click="handleImageClick(postData.pictureUrl6,6)"/>
				 <image :src="postData.pictureUrl7" v-if="postData.pictureUrl7" alt="" @click="handleImageClick(postData.pictureUrl7,7)"/>
				 <image  :src="postData.pictureUrl8" v-if="postData.pictureUrl8" alt="" @click="handleImageClick(postData.pictureUrl8,8)"/>
				 <image  :src="postData.pictureUrl9" v-if="postData.pictureUrl9" alt="" @click="handleImageClick(postData.pictureUrl9,9)"/>
			</div>
			<div class="shop" @click="goDetails">
				<div class="img"><image :src="dishData.image" alt="" /></div>
				<div class="shop-text">
					<div class="tag-rate">
						<div class="tag"> 菜品</div>
						<div class="dish-name"> {{dishData.name}}</div>
					</div>
					<div class="shop-name">{{restaurantData.name}}</div>
				</div>
				<uni-rate v-model="dishData.stars" @change="onChange" size=7vw  class="rate"  allowHalf active-color="#FF8D1A" readonly/>
			</div>

			<div class="utils" >
				
				<div class="like">
					<div class="like-img" @click="like"> <image v-if="!liked" :src="likeImage1" alt="" /><image v-else="liked" :src="likeImage2" alt="" /></div>
					<div class="like-text">{{postData.likes}}</div>
				</div>
				<div class="main-comment">
					<div class="comment-img"> <image src="../../static/chishenme/comment.png" alt="" /></div>
					<div class="comment-text">{{commentData.length}}</div>
				</div>
			</div>
		</div>	
		
		<div class="title">{{tips}}</div>
		
		<div class="comment" v-for="(i,index) in commentData">
			<div class="poster" >
				<div class="poster-img"><image :src="i.userVo.avatar" alt="" /></div>
				
				<div class="post-message">
					<div class="poster-name">{{i.userVo.userName}}</div>
					<div class="time">{{i.postingComment.createTime}}</div>
				</div>
				
				<div class="like">
					<div class="like-img" > 
					<image v-if="!i.liked" :src="likeImage1" alt="" @click="likeComment(index,i.postingComment.id)"/>
					<image v-else="i.liked" :src="likeImage2" alt="" @click="disLikeComment(index,i.postingComment.id)"/></div>
					<div class="like-text">{{i.postingComment.likes}}</div>
				</div>
			</div>
			<div class="text" >
				{{i.postingComment.content}}
			</div>
		</div>
		<div class="title2">—— 已加载全部内容 ——</div>
	</view>
</template>

<script>
	
	export default {
		computed(){

		},
		data() {
			return {
				defaultAvatar:"../../static/chishenme/morentouxiang.jpg",
				tips:"评论区",
				Image23:"",
				value:3.7,
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				showModal: false, // 控制弹窗显示/隐藏
				replyText: '', // 回复内容
				id:2,
				liked:false,
				followed:false,
				self:false,
				likeImage1:"../../static/chishenme/like.png",
				likeImage2:"../../static/chishenme/afterLike.png",
				postData:{
					id: 1,
				    userId: 1,
				    content: "",
				    likes: 1,
				    preferenceId: 1,
				    createTime: "2024-05-10T05:16:36.000+00:00",
				    updateTime: "2024-05-10T05:17:25.000+00:00",
				    prePreference: true,
				    prePictures: true,
					pictureUrl1: "https://ts1.cn.mm.bing.net/th/id/R-C.c7ecb54c9b6abba6f42f5f214942a488?rik=cUwSoCed1bLJTw&riu=http%3a%2f%2fcp2.douguo.net%2fupload%2fcaiku%2f8%2fb%2f2%2fyuan_8b791935c0c456f6016ea17e06d120c2.jpg&ehk=mobEOTIN8k3tE0a3lHZOLkKCK%2fEuHGGcKnJs5AkC%2fEY%3d&risl=&pid=ImgRaw&r=0",
					pictureUrl2: "https://pic.nximg.cn/file/20230109/34420756_171327525108_2.jpg",
					pictureUrl3: "https://ts1.cn.mm.bing.net/th/id/R-C.9177cf0f90608b0a02eb62158e0fd104?rik=mp9%2f4ag5LVeGAA&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20170922%2f25291966_153248392000_2.jpg&ehk=8MatTTMwE4YbOb6%2bqNXztKn8LUOpFH7kfGZndHcONMU%3d&risl=&pid=ImgRaw&r=0",
					pictureUrl4: null,
					pictureUrl5: null,
					pictureUrl6: null,
					pictureUrl7: null,
					pictureUrl8: null,
					pictureUrl9: null,
				
				},
				commentData:[
						{
							liked:false,
							postingComment: {
								id: 1,
								postingId: 1,
								commentId: null,
								content: "测试",
								userId: 1,
								likes: 1,
								createTime: "2024-05-13T05:16:56.000+00:00",
							},
							userVo: {
								userName:"用户",
								avatar:"",
							},
							likeUser: [],
						}
				],
				posterDate:{
					id: 1,
					userName: "poster",
					phone: "147",
					gender: true,
					birthday: "2003-12-31T16:00:00.000+00:00",
					deptName: "computer",
					signature: "哥只是传说",
					avatar: "url1",
					description: "大一",
					preferenceId: 1,
					createTime: "2024-05-01T05:14:18.000+00:00",
					updateTime: "2024-05-01T05:14:18.000+00:00"
				},
				dishData:{
				    id: 1,
				    name: "酸辣土豆丝",
				    price: 3,
				    stars: 5,
				    navigationUrl: "url1",
				    restaurantId: 1,
				    image: "image1",
				    description: "酸辣可口",
				    eatNumber: 2,
				    createTime: "2024-05-18T05:19:12.000+00:00",
				    updateTime: "2024-05-18T05:19:48.000+00:00"
				},
				restaurantData:{
				    restaurantId: 1,
				    name: "美味小厨",
				    picUrl: "url1",
				    score: 3.5
				}
			}
		},
		 onLoad(options) {
			this.id=options.id;
			uni.showLoading({})
			this.fetchData().then(() => {
			    this.getPosterData(this.postData.userId).then(()=>{
					uni.hideLoading();
				}).catch((error) => {
			    console.error(error);
			    // 在这里处理请求失败的逻辑
			    });
			    this.getDishData(this.postData.dish.id);
			    this.getRestaurantData(1);
			    this.getLikesData();
				this.getFollower();
				
			  }).catch((error) => {
			    console.error(error);
			    // 在这里处理请求失败的逻辑
			  });
			

			console.log('this.self');
			console.log(this.self);
			console.log(userInfo.data.id);
			console.log(this.posterDate.id);
			console.log(this.followed)

		},
		methods: {
			handleImageClick(url,index){
				uni.previewImage({
				  urls: [url],
				  current: 1,
				});
			},
			goBack() {
				uni.navigateBack();
			},
			write() {
				this.showModal=true;
				
			},
			closeModal() {
			     this.showModal = false; // 关闭弹窗
			},
			submitReply(){
				if(this.replyText != ''){
					this.closeModal();
					this.$message({
					    message: '发送成功！',
					     type: 'success'
					});
				}else{
					 this.$message.error('请输入回复内容');
				}
				
			},
			async fetchData() {
				const userInfo = uni.getStorageSync('userInfo');
			  try {
			    const postDataPromise = new Promise((resolve, reject) => {
				const url = "http://localhost:8080/posting/" + this.id;
			      uni.request({
			        url: url,
			        method: 'GET',
			        success: (res) => {
			          resolve(res.data.data);
			        },
			        fail: (err) => {
			          reject(err);
			        }
			      });
			    });
			
			    const commentDataPromise = new Promise((resolve, reject) => {
					const url = "http://localhost:8080/posting/" + this.id+"/getCommentByPosting";
			      uni.request({
			        url: url,
			        method: 'GET',
			        success: (res) => {
			          resolve(res.data.data);
			        },
			        fail: (err) => {
			          reject(err);
			        }
			      });
			    });
			
			    const postData = await postDataPromise;
				postData.createTime=this.formatDate(postData.createTime);
				postData.updateTime=this.formatDate(postData.updateTime);
			    this.postData = postData;
				if(this.postData.pictureUrl1){
					console.log("this.getImg(this.postData.pictureUrl1)")
					this.getImg(this.postData.pictureUrl1,1)
				}
				if(this.postData.pictureUrl2){
					console.log("this.getImg(this.postData.pictureUrl1)")
					this.getImg(this.postData.pictureUrl2,2)
				}
				if(this.postData.pictureUrl3){
					console.log("this.getImg(this.postData.pictureUrl1)")
					this.getImg(this.postData.pictureUrl3,3)
				}
				if(this.postData.pictureUrl4){
					console.log("this.getImg(this.postData.pictureUrl1)")
					this.getImg(this.postData.pictureUrl4,4)
				}
				if(this.postData.pictureUrl5){
					console.log("this.getImg(this.postData.pictureUrl1)")
					this.getImg(this.postData.pictureUrl5,5)
				}
				if(this.postData.pictureUrl6){
					console.log("this.getImg(this.postData.pictureUrl1)")
					this.getImg(this.postData.pictureUrl6,6)
				}
				if(this.postData.pictureUrl7){
					console.log("this.getImg(this.postData.pictureUrl1)")
					this.getImg(this.postData.pictureUrl7,7)
				}
				if(this.postData.pictureUrl8){
					console.log("this.getImg(this.postData.pictureUrl1)")
					this.getImg(this.postData.pictureUrl8,8)
				}
				if(this.postData.pictureUrl9){
					console.log("this.getImg(this.postData.pictureUrl1)")
					this.getImg(this.postData.pictureUrl9,9)
				}
				console.log( " this.postData");
				console.log(  this.postData);
			    const commentData = await commentDataPromise;
				this.commentData = commentData.map((comment) => {
				  comment.postingComment.createTime = this.formatDate(comment.postingComment.createTime);
				  if(!comment.userVo.avatar){
					  comment.userVo.avatar=this.defaultAvatar;
				  }
				  return comment;
				});
				if(this.commentData.length===0){
					this.tips="评论区空空如也哦"
				}else{
					this.tips="评论区"
				}
				this.commentData.forEach(function(item) {
					item.likeUser.forEach(function(item2) {
						if (item2 === userInfo.data.id) {
							item.liked=true;
						} else {
						}
					})
				});
			

			
			    await Promise.all([postDataPromise, commentDataPromise]);

			
			    // 在这里处理所有数据请求完成后的逻辑
			  } catch (error) {
			    console.error(error);
			    // 在这里处理请求失败的逻辑
			  }
			},
			async getPosterData(id){
				try {
				  const posterDataPromise = new Promise((resolve, reject) => {
					const url = "http://localhost:8080/user/detail/" + id;
				    uni.request({
				      url: url,
				      method: 'GET',
				      success: (res) => {
				        resolve(res.data.data);
				      },
				      fail: (err) => {
				        reject(err);
				      }
				    });
				  });

				  const posterDate = await posterDataPromise;
				  this.posterDate = posterDate;
				  console.log('this.posterDate');
				  console.log(this.posterDate);
				  const userInfo = uni.getStorageSync('userInfo');
				  this.self = userInfo.data.id==this.posterDate.id;
				  if(!this.posterDate.avatar){
					  this.posterDate.avatar=this.defaultAvatar
				  }
				  await Promise.all([posterDataPromise]);
							
				  // 在这里处理所有数据请求完成后的逻辑
				} catch (error) {
				  console.error(error);
				  // 在这里处理请求失败的逻辑
				}
			},
			getDishData(id){
				const url = "http://localhost:8080/dish/detail/" + id;
				uni.request({
				  url: url,
				  method: 'GET',
				  success: (res) => {
					this.dishData=res.data.data
				  },
				  fail: (err) => {
				    console.error(err);
				    // 在这里处理请求失败的逻辑
				  }
				});
			},
			getRestaurantData(id){
				const url = "http://localhost:8080/restaurant/details/" + id;
				uni.request({
				  url: url,
				  method: 'GET',
				  success: (res) => {
					this.restaurantData=res.data.data
				
				  },
				  fail: (err) => {
				    console.error(err);
				    // 在这里处理请求失败的逻辑
				  }
				});
			},
			getLikesData(){

			 const url =  'http://localhost:8080/posting/' + this.id + '/getAllPostingLiker';
			 const userInfo = uni.getStorageSync('userInfo');
			 uni.request({
			   url: url,
			   method: 'GET',
			   success: (res) => {
			 	 const likedObj = res.data.data.find(obj => obj.id === userInfo.data.id);
			 	 if(likedObj){
			 		 this.liked=true;
			 	 }else{
			 		 this.liked=false;
			 	 }
			 	 // console.log("getLikesData:");
			 	 // console.log(res.data);
			     // 在这里处理请求成功的逻辑，设置相应项的username
			   },
			   fail: (err) => {
			     console.error(err);
			     // 在这里处理请求失败的逻辑
			   }
			 });
			},
			formatDate(dateString) {
			  const date = new Date(dateString);
			  
			  const year = date.getFullYear();
			  const month = ("0" + (date.getMonth() + 1)).slice(-2);
			  const day = ("0" + date.getDate()).slice(-2);
			  const hours = ("0" + date.getHours()).slice(-2);
			  const minutes = ("0" + date.getMinutes()).slice(-2);
			  const seconds = ("0" + date.getSeconds()).slice(-2);
			  
			  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			  
			  return formattedDate;
			},
			like(){

				const userInfo = uni.getStorageSync('userInfo');
				if(this.liked){     //取消点赞
					uni.request({
					  url: 'http://localhost:8080/posting/' + this.postData.id + '/deleteLike?userId='+ userInfo.data.id,
					  method: 'POST',
					  data: {
					    
					  },
					  success: function(res) {
					  
						
					  },
					  fail: function(err) {
					    // 处理失败情况
					    console.error(err);
					    // 其他操作...
					  }
					});
					this.liked=!this.liked;
					this.postData.likes--;
				}else{
					uni.request({    //点赞
					  url: 'http://localhost:8080/posting/' + this.postData.id + '/like?userId='+ userInfo.data.id,
					  method: 'POST',
					  data: {
					    
					  },
					  success: function(res) {
					   
						
					  },
					  fail: function(err) {
					    // 处理失败情况
					    console.error(err);
					    // 其他操作...
					  }
					});
					this.liked=!this.liked;
					this.postData.likes++;
				}				
			},
<<<<<<< HEAD
			comment(){
				const userInfo = uni.getStorageSync('userInfo');
				const id= this.id;
				if(this.replyText===""){
					uni.showToast({
							title: '请输入内容',//显示的文字
					        duration: 1000,  //显示多少时间，默认1500毫秒
					        icon: "error"  ,//自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
							mask:true,
					})
					return;
				};
				uni.request({					
				  url: 'http://localhost:8080/posting',
				  method: 'POST',
				  data: {
				    id:'',
				    postingId:this.postData.id,// 外键，指向被评论的帖子
				    content:this.replyText, // 评论内容
				    userId:userInfo.data.id, // 外键，评论者用户ID
				    likes:0,
				  },
				  success: function(res) {
					// console.log(res)
					uni.reLaunch({
					  url: './postDetail?id='+id // 当前页面的路径
					});
				  },
				  fail: function(err) {
				    // 处理失败情况
				    console.error(err);
				    // 其他操作...
				  }
				});
			},			
=======
			comment(){				const userInfo = uni.getStorageSync('userInfo');				const id= this.id;				if(this.replyText===""){					uni.showToast({							title: '请输入内容',//显示的文字					        duration: 1000,  //显示多少时间，默认1500毫秒					        icon: "error"  ,//自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none							mask:true,					})					return;				};				uni.request({          //获取图片					url: 'http://8.138.90.16:8080/posting',					method: 'POST',					data: {					  id:'',					  postingId:this.postData.id,// 外键，指向被评论的帖子					  content:this.replyText, // 评论内容					  userId:userInfo.data.id, // 外键，评论者用户ID					  likes:0,					},					success: res1 => {							this.fetchData();							this.showModal=false;					},					fail: (err) => {						console.error(err);						// 在这里处理请求失败的逻辑					}				});			},
>>>>>>> cf370fbbdd0e2619b30401affbcab9dcb463763f
			follow(){
				const userInfo = uni.getStorageSync('userInfo');
				this.followed=true;
				uni.request({
				  url: 'http://localhost:8080/user/'+ userInfo.data.id+ '/follow/'+this.posterDate.id,
				  method: 'POST',
				})
				  .then(response => {
					// 注册请求成功的处理逻辑
					console.log(response);

				  })
				  .catch(error => {
					// 注册请求失败的处理逻辑
					console.error(error);
				  })
			},
			unfollow(){
				const userInfo = uni.getStorageSync('userInfo');
				this.followed=false;
				uni.request({
				  url: 'http://localhost:8080/user/'+ userInfo.data.id+ '/unfollow/'+this.posterDate.id,
				  method: 'POST',
				})
				  .then(response => {
					// 注册请求成功的处理逻辑
					console.log(response);
			
				  })
				  .catch(error => {
					// 注册请求失败的处理逻辑
					console.error(error);
				  })
			},
			getFollower(){  //获取当前用户已关注的id
				const userInfo = uni.getStorageSync('userInfo');
				const url = 'http://localhost:8080/user/'+userInfo.data.id+'/followers';
				uni.request({
				  url: url,
				  method: 'GET',
				  success: (res) => {
					res.data.data.forEach(item => {
					  if (item.id === this.postData.userId) {
					    this.followed=true;
					  }
					});
				  },
				  fail: (err) => {
				    console.error(err);
				    // 在这里处理请求失败的逻辑
				  }
				});
			},
			likeComment(index,id){
				const userInfo = uni.getStorageSync('userInfo');
				const url = 'http://localhost:8080/comment/'+id+'/addLike?userId='+userInfo.data.id;
				uni.request({
				  url: url,
				  method: 'POST',
				  success: (res) => {
					  console.log(res)
					 
				  },
				  fail: (err) => {
				    console.error(err);
				    // 在这里处理请求失败的逻辑
				  }
				});
				this.commentData[index].liked=true;
				this.commentData[index].postingComment.likes++;
			},
			disLikeComment(index,id){
				const userInfo = uni.getStorageSync('userInfo');
				const url = 'http://localhost:8080/comment/'+id+'/deleteLike?userId='+userInfo.data.id;
				uni.request({
				  url: url,
				  method: 'POST',
				  success: (res) => {
					  console.log(res)
					 
				  },
				  fail: (err) => {
				    console.error(err);
				    // 在这里处理请求失败的逻辑
				  }
				});
				this.commentData[index].liked=false;
				this.commentData[index].postingComment.likes--;
			},
			getImg(id,index){
				uni.request({          //获取图片
					url: 'http://localhost:8080/image/getImage?id='+id,
					method: 'GET',
					success: res1 => {
							// console.log("根据文件地址获得的base64编码图片"); 
							// console.log(res1.data.data.data)
							// 将base64字符串转换为ArrayBuffer格式
							// const arrayBuffer = uni.base64ToArrayBuffer(res1.data.data.data);
							// // 将ArrayBuffer转换为Blob对象
							// const blob = new Blob([arrayBuffer], { type: 'image/png' });
							// // 创建Blob URL
							// const imgUrl = URL.createObjectURL(blob);
							
							const base64Data = res1.data.data.data;
							// 直接设置图片 src 属性
							const imgUrl = `data:image/png;base64,${base64Data}`;
							
							if(index==1){
								this.postData.pictureUrl1=imgUrl;
							}
							if(index==2){
								this.postData.pictureUrl2=imgUrl;
							}
							if(index==3){
								this.postData.pictureUrl3=imgUrl;
							}
							if(index==4){
								this.postData.pictureUrl4=imgUrl;
							}
							if(index==5){
								this.postData.pictureUrl5=imgUrl;
							}
							if(index==6){
								this.postData.pictureUrl6=imgUrl;
							}
							if(index==7){
								this.postData.pictureUrl7=imgUrl;
							}
							if(index==8){
								this.postData.pictureUrl8=imgUrl;
							}
							if(index==9){
								this.postData.pictureUrl9=imgUrl;
							}
							
							return imgUrl;
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			goDetails(){
				uni.navigateTo({
				url:'/pages/details/details?id='+this.dishData.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.post-detail-container{
		background-color: #E5E5E5;
		padding-bottom: 6vh;
		max-width: 100vw;
		height: 92vh;
		.headnavi {
			/* height: 10%; */
			width: 100vw;
			background-color: white;
			/* position: sticky; */
			display: flex;
			position: fixed;
			box-shadow: 0rpx 10rpx 20rpx 0rpx #e5e5e5;
			padding-bottom: 1vh;
			height: 8vh;
			z-index: 900;
			align-items: center; /* 垂直居中 */
			justify-content: center;
			.navi-title {
				margin-top: 5vh;
				font-size: 40rpx;
				color: #FF8D1A;
			}
		}
		.arrow{
			/* transform: rotate(180deg); */
			position: fixed;
			width: 6vw;
			height: 3vh;
			margin-top: 5vh;
			margin-left: 5vw;
			z-index: 901;
		}
		.write{
			padding-left: 3vw;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #CCCCCC;
			height: 6vh;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 4vw;
			color: #565656;
			z-index: 999;
			.write-icon{
				margin-right: 8vw;
			}
		}
		.reply{
			.overlay {
			  position: fixed;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
			  z-index: 999; /* 确保遮罩层在弹窗上方 */
			}
			
			.modal {
			  position: fixed;
			  bottom: 0;
			  left: 0;
			  right: 0;
			  background-color: white;
			  padding: 10px;
			  z-index: 1000; /* 确保弹窗在遮罩层上方 */
			  border-radius: 30px 30px 0 0;
			}
		}
		.main{
			background-color: #FEFEFE;
			border-radius: 40px 40px 0 0;
			margin: 9vh 2vw 1vw 2vw;
			 background: linear-gradient(to bottom, white, #F4F4F4);
			.poster{
				width: 95%;
				height: 100rpx;
				display: flex;
				
				.poster-img{
					flex: 1.8;
					background-color: transparent;
					 display: flex;
					 justify-content: center;
					 align-items: center;
					  border-radius: 50%;
					 image{
						 width: 12vw;
						 height: 12vw;
						 border-radius: 50%;
					 }
				}
				.post-message{
					flex: 8;
					background-color: transparent;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					font-size: 30rpx;
					.poster-name{
						height: 55rpx;
						 overflow: hidden;
						 white-space: nowrap;
						 text-overflow: ellipsis;
						 max-width: 450rpx; 
						display: inline-block;
						padding-top: 10rpx;
			
					}
					.time{
					  height: 45rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						display: inline-block;
						max-width: 300rpx; 
						font-size: 27rpx;
						color: #9C9C9C;
						justify-content: center;
						align-items: center;
						padding-bottom: 20rpx;
					}
				}
				
				.follow{
					flex:1;
					display: flex;
					justify-content: center;
					align-items: center;
					.follow-img{
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							height: 4vh;
							width: 16vw;
						}
					}
				}
			}
			.text{
				padding: 1vh 2vw;
				font-weight: 400;
				font-size: 4.5vw;
			}
			.imgs {
			  display: grid;
			  grid-template-columns: repeat(3, 1fr); /* 每行有三个正方形块 */
			  gap: 10rpx; /* 你可以根据需要调整间隙大小 */
			  margin: 0 2vw;
			}
			
			.imgs image {
			  width: 100%; /* 图片宽度占满父容器 */
			  height: 200rpx;
			  object-fit: cover; /* 裁切图片 */
			  object-position: center; /* 显示图片中间部分 */
			}



			.shop{
				background-color: transparent;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				 margin-top: 1vh;
				.img{
					flex: 2.5;
					height: 95%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					background-color: transparent;
					margin: 0;
					padding-left: 10rpx;
					image{
						width: 12vw;
						height: 12vw;
						border-radius: 50%;
						margin: 1px;
					}
				}
				.shop-text{
					flex: 9;
					display: flex;
					flex-direction: column;
					.tag-rate{
						display: flex;
						.tag{
							background-color: #A6A6A6;
							width: 60rpx;
							color: #E3E3E3;
							font-size: 25rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 10rpx;
						}
						.dish-name{
							font-size: 30rpx;
							font-weight: bold;
							padding-left: 10px;
						}
						
					}
					
					.shop-name{
						font-size: 30rpx;
						color: #9C9C9C;
					}
				}
				.rate{
					margin-right: 2vw;
				}
			}
			.utils{
				display: flex;
				justify-content: space-between;
				background-color: transparent;
				padding: 1vh 20%;
				.main-comment{
	
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: transparent;
					.comment-img{
						margin: 0;
						padding: 0;
						margin-left: 10rpx;
						width: 50rpx;
						padding-top: 10rpx;
						image{
							width: 5vw;
							height: 5vw;
						}
					}
					.comment-text{
						flex: 1;
						overflow: hidden;
						 text-overflow: ellipsis;
						 white-space: nowrap;
						 max-width: 100rpx; 
						display: inline-block;
						justify-content: flex-end;
						align-items: flex-end;
						font-weight: bold;
					}
				}
				.like{

					display: flex;
					justify-content: center;
					align-items: center;
					padding-right: 10rpx;
					.like-img{
						margin: 0;
						padding: 0;
						margin-left: 10rpx;
						width: 50rpx;
						padding-top: 10rpx;
						image{
							width: 5vw;
							height: 5vw;
						}
					}
					.like-text{
						flex: 1;
						overflow: hidden;
						 white-space: nowrap;
						 text-overflow: ellipsis;
						 max-width: 100rpx; 
						display: inline-block;
						justify-content: flex-start;
						align-items: flex-start;
						font-weight: bold;
					}
				}
			}
		}
		.title{
			margin: 0 2vw ;
			padding: 0.5vh 0;
			padding-left: 1vw;
			font-size: 4vw;
			text-align: left;
			background-color: #F4F4F5;
			color: #9C9C9C;
			box-sizing: border-box;
			border-radius: 10px 10px 0 0;
		}
		.title2{
			margin: 0 2vw ;
			padding: 0.5vh 0;
			font-size: 3vw;
			text-align: center;
			background-color: #F4F4F5;
			color: #9C9C9C;
			box-sizing: border-box;
			background-color: transparent;
		}
		.comment{
			margin: 0 2vw 1vw 2vw;
			background: linear-gradient(to bottom, white, #F4F4F4);
			.poster{
				width: 100%;
				height: 100rpx;
				display: flex;
				.poster-img{
					flex: 1.8;
					background-color: transparent;
					 display: flex;
					 justify-content: center;
					 align-content: center;
					 padding-top: 1vh;
					 image{
						 height: 12vw;
						 width: 12vw;
						 border-radius: 50%;
					 }
				}
				.post-message{
					flex: 8;
					background-color: transparent;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					font-size: 30rpx;
					.poster-name{
						height: 55rpx;
						 overflow: hidden;
						 white-space: nowrap;
						 text-overflow: ellipsis;
						 max-width: 450rpx; 
						display: inline-block;
						padding-top: 10rpx;
			
					}
					.time{
					  height: 45rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						display: inline-block;
						max-width: 300rpx; 
						font-size: 27rpx;
						color: #9C9C9C;
						justify-content: center;
						align-items: center;
						padding-bottom: 20rpx;
					}
				}
				
				.follow{
					flex:1;
					display: flex;
					justify-content: center;
					align-items: center;
					.follow-img{
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							height: 4vh;
							width: 16vw;
						}
					}
				}
				.like{
				
					display: flex;
					justify-content: center;
					align-items: center;
					padding-right: 10rpx;
					.like-img{
						margin: 0;
						padding: 0;
						margin-left: 10rpx;
						width: 50rpx;
						padding-top: 10rpx;
						image{
							width: 5vw;
							height: 5vw;
						}
					}
					.like-text{
						flex: 1;
						overflow: hidden;
						 white-space: nowrap;
						 text-overflow: ellipsis;
						 max-width: 100rpx; 
						display: inline-block;
						justify-content: flex-start;
						align-items: flex-start;
						font-weight: bold;
					}
				}
			}
			.text{
				padding: 1vh 2vw 2vh 14%;
				font-weight: 400;
				font-size: 4.5vw;
			}
		}
	}

</style>
